<template>
	<view class="login-wrapper">
		<view class="login-title">
			<view class="login-title-txt">
				您好，请登录账号！
			</view>
			<text class="login-title-small-txt">开启您的快乐购物之旅！</text>
		</view>
		<view class="login-form">
			<view class="form-item flex-c">
				<text class="form-item-lable">手机号</text>
				<input type="text" class="form-item-input" v-model="phone" placeholder="输入手机号" />
			</view>
			<view class="form-item flex-c" v-if="loginMethod === 'code'">
				<text class="form-item-lable">验证码</text>
				<input type="number" v-model="code" class="form-item-input" placeholder="输入短信验证码" />
				<text class="get-code-btn" @click="getTestCode">{{codeTxt}}</text>
			</view>
			<view class="form-item flex-c" v-if="loginMethod === 'pass'"> 
				<input :type="viewPass ? 'text' : 'password' " v-model="loginPassword" class="form-item-input" placeholder="输入登陆密码" />
				<text class="get-code-btn" @click="toggleType">
					<uni-icons v-if="viewPass" type="eye" size="30"></uni-icons>
					<uni-icons v-if="!viewPass" type="eye-slash" size="30"></uni-icons>
				</text>
			</view>
			<button class="login-btn" @click="loginHandle">登录</button>
			<view class="login-opration flex-c-s">
				<view @click="toggleMethod">
					<text v-if="loginMethod === 'code'">账号密码登录</text>
					<text v-if="loginMethod === 'pass'">短信验证码登录</text>
				</view>
				<text @click="forgetPassword">忘记密码？</text>
			</view>
		</view>
		<view class="register-wrapper">
			<text>您还没有注册账号？ </text><text class="register-account" @click="register">立即注册 &gt;</text>
		</view>
		<view class="agreement flex-c">
			<checkbox-group @change="agreeChange">
				<label class="flex-c">
					<checkbox value="cb"  color="#EB5883" style="transform:scale(0.7)" />我已阅读并同意
				</label> 
			</checkbox-group>
			<text @click="userAgreement">《用户协议》</text>
			<text @click="policy">《隐私政策》</text>
		</view>
		 
	</view>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, nextTick } from 'vue'
import { onReady } from '@dcloudio/uni-app'
import { getLoginCode, login} from '@/http/api'
import { updateUserLoginInfo } from '@/utils/tools'

import { accountLogin } from '@/http/my' 

export default defineComponent({
	setup() { 
		const loginMethod = ref<'code' | 'pass'>('pass')
		const viewPass = ref(false) 
		const timer = ref()
		const state = reactive({
			phone: '',
			password: '',
			code: '',
			second: 60,
			agree: false,
			codeTxt: '获取验证码',
			loginPassword: ''
		})
		 
		const register = () => {
			uni.navigateTo({
				url: '/pages/login/register'
			})
		}
		const loginHandle = async () => {
			if(!/^1[35789]\d{9}$/.test(state.phone)) {
				uni.showToast({
					icon: 'none',
					title: '输入正确的手机号'
				})
				return
			}
			let res: any;
			if(loginMethod.value === 'code') {
				if(!/^\d{6}$/.test(state.code)) {
					uni.showToast({
						icon: 'none',
						title: '输入6位数字验证码'
					})
					return
				}
				if(!state.agree) {
					uni.showToast({
						icon: 'none',
						title: '请勾选注册协议和隐私政策'
					})
					return
				}
				res = await login({
					phone: state.phone,
					verificationCode: state.code
				})
			} else {
				if(!state.loginPassword) {
					uni.showToast({
						icon: 'none',
						title: '输入登录密码'
					})
					return
				}
				if(!state.agree) {
					uni.showToast({
						icon: 'none',
						title: '请勾选注册协议和隐私政策'
					})
					return
				}
				res = await accountLogin({
					username: state.phone,
					loginPassword: state.loginPassword
				}) 
			}
			
			
			if(res?.code === 0) {
				uni.showToast({
					icon: 'success',
					title: '登录成功',
					success() {
						uni.setStorage({
							key: 'loginInfo',
							data: JSON.stringify(res.data),
							async success () {
								await nextTick()
								updateUserLoginInfo(() => {
									uni.switchTab({
										url: '/pages/tabbar/index/index'
									})
								}, (msg: string) => {
									uni.showToast({
										title: msg || '获取用户信息失败',
										icon: 'none'
									})
								}) 
							}
						})
					}
				}) 
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg || '登录失败'
				})
			}
		}
		const toggleType = () => {
			viewPass.value = !viewPass.value
		}
		
		const toggleMethod = () => {
			if(loginMethod.value === 'code') {
				loginMethod.value = 'pass'
			} else {
				loginMethod.value = 'code'
			}
		}
		const getTestCode = async () => { // 15502992957
			if(state.codeTxt !== '获取验证码') return;
			try{
				let res = await getLoginCode(state.phone); 
				console.log(res);
				if(res.code === 0 ) {
					uni.showToast({
						icon: 'success',
						title: '验证码已发送'
					})
					timer.value = setInterval(() => {
						if(state.second <= 0) {
							clearInterval(timer.value)
							state.second = 60
							state.codeTxt = '获取验证码'
							return
						}
						state.second --
						state.codeTxt = `${state.second}后重新发送` 
					}, 1000) 
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}  
			}catch(e){ 
				uni.showToast({
					icon: 'fail',
					title: '网络错误'
				})
			} 
		}
		
		const forgetPassword = () => {
			uni.navigateTo({
				url: '/pages/login/findPassword'
			})
		}
		
		const agreeChange = (e) => {
			if(e.detail.value.length) {
				state.agree = true
			} else {
				state.agree = false
			} 
		}
		
		const userAgreement = () => { 
			uni.navigateTo({
				url: '/pages/myPackge/appInfo/userAgreement'
			})
		}
		const policy = () => {
			uni.navigateTo({
				url: '/pages/myPackge/appInfo/policy'
			})
		}
		
		return {
			loginMethod,
			loginHandle,
			register,
			viewPass,
			toggleType,
			toggleMethod,
			getTestCode,
			timer,
			forgetPassword,
			agreeChange,
			userAgreement,
			policy,
			...toRefs(state)
		}
	}
})
</script>

<style lang="scss" scoped>
.login-wrapper{
	padding: 40rpx 0;
	.login-title{
		margin-left: 24rpx;
		.login-title-txt{
			font-size: 48rpx;
			font-weight: 700;
		}
		.login-title-small-txt{
			font-size: 28rpx;
			color: #999;
		}
	}
	.login-form{
		margin: 60rpx ;
		.form-item{
			height: 90rpx;
			background-color: #f0f0f0;
			border-radius: 45rpx;
			padding: 0 30rpx;
			&:first-child{
				margin-bottom: 30rpx;
			}
			.form-item-lable{
				font-size: 32rpx;
				color: #666;
				margin-right: 20rpx;
			}
			.form-item-input{
				flex: 1;
				height: 32rpx;
				font-size: 32rpx;
			}
		}
		.login-opration{
			font-size: 24rpx;
			color: #666;
			margin-top: 20rpx;
		}
		.login-btn{
			height: 90rpx;
			background-color: $theme-primary-color;
			margin-top: 60rpx;
			border-radius: 45rpx;
			color: #fff;
			line-height: 90rpx;
			font-size: 34rpx;
		}
	}
	.register-wrapper{
		font-size: 26rpx;
		color: #666;
		text-align: center;
		margin-top: 100rpx;
		.register-account{
			color: $theme-primary-color;
			font-weight: 700;
		}
	}
	.agreement{
		margin-top: 80rpx;
		font-size: 26rpx;
		color: #666;
		justify-content: center;
	}
}	
</style>
